<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <template #default>
        <!-- 表格内搜索表单 -->
        <common-form
          :form-infos="searchForm"
          :form-attrs="{
            'label-width': 'auto',
            'label-position': 'left',
            size: 'small',
            inline: true,
          }"
          @submit="onSearchSubmit"
        />
        <el-card>
          <div id="settle">
            <div>
              <div>分站总余额 (元)</div>
              <div id="money">0.00</div>
            </div>
            <div id="right">
              <div>分站总转账余额 (元)</div>
              <div id="money">0.00</div>
            </div>
          </div>
        </el-card>
      </template>

       <!-- 表格展开信息 -->
      <template #expand="props">
        {{props.props.row}}
      </template>
    </common-table>
    <!-- 弹出框编辑表单 -->
    <el-dialog title="编辑名称" v-model="isShowDialog">
        <div id="box">
          <div><span>账单编号：</span><span>2021982641675</span></div>
          <div><span>分站城市：</span><span>上海市</span></div>
          <div><span>转账金额：</span><span>￥100.00</span></div>
          <div><span>转账凭证：</span><span></span></div>
          <div><span>转账凭证说明：</span><span></span></div>
          <div><span>转账时间：</span><span>2021-08-27 00:00:00</span></div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, shallowReactive, ref } from "vue";

export default defineComponent({
  setup() {
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: '分站转账',
      // infos: ['提示1', '提示2'],
      attrs: {
        data: [
          //表格需要的数据
          {
            billNumber: "2021008270000",
            substationCity: "超市",
            transferAmount: "1000.00",
            paymentVoucher:'200.00',
            time:'2021-08-28'
          },
          {
            billNumber: "2021008270000",
            substationCity: "超市",
            transferAmount: "1000.00",
            paymentVoucher:'200.00',
            time:'2021-08-28'
          },
          {
            billNumber: "2021008270000",
            substationCity: "超市",
            transferAmount: "1000.00",
            paymentVoucher:'200.00',
            time:'2021-08-28'
          },
          {
            billNumber: "2021008270000",
            substationCity: "超市",
            transferAmount: "1000.00",
            paymentVoucher:'200.00',
            time:'2021-08-28'
          },
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
        {
          prop: "billNumber",
          label: "账单编号",
        },
        {
          prop: "substationCity",
          label: "分站城市",
        },
        {
          prop: "transferAmount",
          label: "转账金额",
          // sortable: true,
        },
        {
          prop: "paymentVoucher",
          label: "付款凭证",
        },
        {
          prop: "time",
          label: "时间",
        }
      ],
      // 操作按钮
      controller: ["查看"],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
        {
        id: 1,
        name: "CommonInput",
        prop: "username",
        value: "",
        rule: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
        formItemAttrs: {
          label: "分站城市",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入分站城市",
        },
      },
       {
        id: 13,
        name: "CommonDatePicker",
        prop: "datePicker",
        value: "",
        formItemAttrs: {
          label: "账期截止日期",
        },
        inputAttrs: {
          type: "datetime",
          placeholder: "选择日期",
        },
      },
    ]);

    //编辑表单配置
    const editForm = shallowReactive([
         
    ]);

    //弹出框绑定
    let isShowDialog = ref(false);

    //弹出表单
    let dialogTableVisible = ref(true)

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row)
      isShowDialog.value=true
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = (data) => {
      console.log("edit", data);
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      isShowDialog,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
      dialogTableVisible
    };
  },
});
</script>
<style lang="scss" scoped>
    #settle{
      display: flex;
      text-align: center;
      padding:0 60px;
    }
    #money{
      font-size: 17px;
      font-weight: bold;
    }
    #right{
      margin-left: 200px;
    }
    #box{
      border:1px solid #ddd;
      padding: 20px;
    }
    #box>div{
      height: 30px;
    }
</style>
